<template>
  <div>
    <h4>JOA</h4>
    <el-row type="flex" justify="space-between">
      <el-col :span="5">
        <div>
          <el-button type="primary" @click="dialogVisible = true">填写《JOA评定表》</el-button>
        </div>
      </el-col>
      <el-col :span="3">
        <div>
          <el-input v-model="pgForm.joa_input1" placeholder="" readonly style="width: 60%;"></el-input><span> 分</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <el-input v-model="pgForm.joa_input2" placeholder="" readonly></el-input>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="查看表单"
      :visible.sync="dialogVisible"
      width="60%"
      center
      :before-close="handleClose">

      <h4>JOA评定</h4>
      <el-row>
        <el-col>
          <span>下腰痛</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList1">
              <el-checkbox label="3">无任何疼痛</el-checkbox>
              <el-checkbox label="2">偶然稍微疼痛</el-checkbox>
              <el-checkbox label="1">频发的稍微疼痛或偶发严重疼痛</el-checkbox>
              <el-checkbox label="0">频发或持续的严重疼痛</el-checkbox>
              <el-input v-model="pgForm.joa_input3" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>腿部的疼痛和/或者麻木感</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList2">
              <el-checkbox label="3">无任何疼痛</el-checkbox>
              <el-checkbox label="2">偶然稍微疼痛</el-checkbox>
              <el-checkbox label="1">频发的稍微疼痛或偶发严重疼痛</el-checkbox>
              <el-checkbox label="0">频发或持续的严重疼痛</el-checkbox>
              <el-input v-model="pgForm.joa_input4" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>步态</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList3">
              <el-checkbox label="3">正常</el-checkbox>
              <el-checkbox label="2">即使感肌肉无力，也可步行超过500米</el-checkbox>
              <el-checkbox label="1">步行小于500米，即出现腿痛，刺痛，无力</el-checkbox>
              <el-checkbox label="0">步行小于500米，即出现腿痛，刺痛，无力</el-checkbox>
              <el-input v-model="pgForm.joa_input5" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>直腿抬高试验</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList4">
              <el-checkbox label="2">无</el-checkbox>
              <el-checkbox label="1">30度-70度</el-checkbox>
              <el-checkbox label="0">31度</el-checkbox>
              <el-input v-model="pgForm.joa_input6" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>感觉障碍</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList5">
              <el-checkbox label="2">正常</el-checkbox>
              <el-checkbox label="1">轻度障碍（非主观）</el-checkbox>
              <el-checkbox label="0">明显障碍</el-checkbox>
              <el-input v-model="pgForm.joa_input7" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>运动障碍</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList6">
              <el-checkbox label="2">正常（肌力5级）</el-checkbox>
              <el-checkbox label="1">轻度无力（肌力4级）</el-checkbox>
              <el-checkbox label="0">明显无力（肌力0-3级）</el-checkbox>
              <el-input v-model="pgForm.joa_input8" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>膀胱功能</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList7">
              <el-checkbox label="0">正常</el-checkbox>
              <el-checkbox label="-3">轻度受限</el-checkbox>
              <el-checkbox label="-6">明显受限（尿失留，尿失禁）</el-checkbox>
              <el-input v-model="pgForm.joa_input9" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>平卧翻身</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList8">
              <el-checkbox label="0">严重受限</el-checkbox>
              <el-checkbox label="1">中等受限</el-checkbox>
              <el-checkbox label="2">无受限</el-checkbox>
              <el-input v-model="pgForm.joa_input10" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>站立</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList9">
              <el-checkbox label="0">严重受限</el-checkbox>
              <el-checkbox label="1">中等受限</el-checkbox>
              <el-checkbox label="2">无受限</el-checkbox>
              <el-input v-model="pgForm.joa_input11" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>洗漱</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList10">
              <el-checkbox label="0">严重受限</el-checkbox>
              <el-checkbox label="1">中等受限</el-checkbox>
              <el-checkbox label="2">无受限</el-checkbox>
              <el-input v-model="pgForm.joa_input12" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>前屈</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList11">
              <el-checkbox label="0">严重受限</el-checkbox>
              <el-checkbox label="1">中等受限</el-checkbox>
              <el-checkbox label="2">无受限</el-checkbox>
              <el-input v-model="pgForm.joa_input13" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>坐位</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList12">
              <el-checkbox label="0">严重受限</el-checkbox>
              <el-checkbox label="1">中等受限</el-checkbox>
              <el-checkbox label="2">无受限</el-checkbox>
              <el-input v-model="pgForm.joa_input14" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>举重物</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList13">
              <el-checkbox label="0">严重受限</el-checkbox>
              <el-checkbox label="1">中等受限</el-checkbox>
              <el-checkbox label="2">无受限</el-checkbox>
              <el-input v-model="pgForm.joa_input15" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>行走</span>
          <div class="grid-content">
            <el-checkbox-group v-model="pgForm.joa_checkList14">
              <el-checkbox label="0">严重受限</el-checkbox>
              <el-checkbox label="1">中等受限</el-checkbox>
              <el-checkbox label="2">无受限</el-checkbox>
              <el-input v-model="pgForm.joa_input16" placeholder="备注"></el-input>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col >
          <span>总分：</span><el-tag type="success" size="medium">{{ sum }}</el-tag>
        </el-col>
      </el-row>


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="queDing">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "joa",
  title: 'joa评分',
  data(){
    return{
      dialogVisible: false,
      pgForm: {
        joa_input1: '',
        joa_input2: '',
        joa_input3: '',
        joa_input4: '',
        joa_input5: '',
        joa_input6: '',
        joa_input7: '',
        joa_input8: '',
        joa_input9: '',
        joa_input10: '',
        joa_input11: '',
        joa_input12: '',
        joa_input13: '',
        joa_input14: '',
        joa_input15: '',
        joa_input16: '',
        joa_checkList1: [],
        joa_checkList2: [],
        joa_checkList3: [],
        joa_checkList4: [],
        joa_checkList5: [],
        joa_checkList6: [],
        joa_checkList7: [],
        joa_checkList8: [],
        joa_checkList9: [],
        joa_checkList10: [],
        joa_checkList11: [],
        joa_checkList12: [],
        joa_checkList13: [],
        joa_checkList14: [],
      }
    }
  },
  methods: {
    queDing(){
      this.dialogVisible = false;
      this.pgForm.joa_input1 = this.sum;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.pgForm.joa_input1 = '';
          this.pgForm.joa_input2 = '';
          this.pgForm.joa_input3 = '';
          this.pgForm.joa_input4 = '';
          this.pgForm.joa_input5 = '';
          this.pgForm.joa_input6 = '';
          this.pgForm.joa_input7 = '';
          this.pgForm.joa_input8 = '';
          this.pgForm.joa_input9 = '';
          this.pgForm.joa_checkList1 = [];
          this.pgForm.joa_checkList2 = [];
          this.pgForm.joa_checkList3 = [];
          this.pgForm.joa_checkList4 = [];
          this.pgForm.joa_checkList5 = [];
          this.pgForm.joa_checkList6 = [];
          this.pgForm.joa_checkList7 = [];
          done();
        })
        .catch(_ => {});
    }
  },
  computed: {
    sum(){
      let list = this.pgForm.joa_checkList1.concat(this.pgForm.joa_checkList2,this.pgForm.joa_checkList3,this.pgForm.joa_checkList4,this.pgForm.joa_checkList5,this.pgForm.joa_checkList6,this.pgForm.joa_checkList7,this.pgForm.joa_checkList8,this.pgForm.joa_checkList9,this.pgForm.joa_checkList10,this.pgForm.joa_checkList11,this.pgForm.joa_checkList12,this.pgForm.joa_checkList13,this.pgForm.joa_checkList14);
      let sum = 0;
      list.forEach(item => {
        sum += (item)*1;
      })
      return sum;
    }
  }
}
</script>

<style scoped>
.el-row{
  margin: 10px 0;
  padding: 20px 20px;
  background-color: #f9f9f9;
  flex-wrap: wrap;
  flex-direction: row;
}
.el-col {
  margin:10px 0;
}
.el-checkbox-group{
  padding: 10px 20px;
}
.el-checkbox{
  display: block;
  margin-bottom: 15px;
}

</style>
